<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title id="page-title">濉溪区域影像主题大数据</title>
  <script src="./js/jquery-1.12.3.min.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script src="./js/echarts-gl.min.js"></script>
  <link rel="stylesheet" href="./css/common.css" />
</head>

<body>
  <div class="container">
    <!-- 头部 -->
    <div class="header-con">
      <div class="all-title-bg"></div>
    </div>
    <div class="main-con">
      <!-- 左侧区域 -->
      <div class="left-area">
        <div class="box-one">
          <div class="card-title">
            <span class="card-title-text">健康档案</span>
          </div>
          <div class="chart-container" id="left-chart-one"></div>
        </div>
        <div class="box-two">
          <div class="card-title">
            <span class="card-title-text">高血压</span>
          </div>
          <div class="box-two-main">
            <div class="box-two-main-left" id="left-chart-two-left"></div>
            <div class="box-two-main-right" id="left-chart-two-right"></div>
          </div>
        </div>
        <div class="box-three">
          <div class="card-title">
            <span class="card-title-text">2型糖尿病</span>
          </div>
          <div class="box-three-main">
            <div class="box-three-main-left" id="left-chart-three-left"></div>
            <div class="box-three-main-right" id="left-chart-three-right"></div>
          </div>
        </div>
      </div>

      <!-- 中间区域 -->
      <div class="middle-area">
        <!-- 上方的卡片 -->
        <div class="area-card" id="area-card">
          <div>
            <button class="middle-area-right" id="year">全县区域</button>
          </div>
          <!-- 地图区域 -->
          <div class="map">
            <!-- 放置地图 todo -->
            <div class="map-box"></div>
            <!-- 数据展示 todo-->
            <div class="map-data"></div>
          </div>
        </div>

        <!-- 下方的卡片 -->
        <div class="middle-bottom">
          <div class="middle-card-title">
            <span class="middle-card-title-text">重点人群签约情况</span>
          </div>
          <div class="chart-container" id="middle-chart"></div>
        </div>
      </div>

      <!-- 右侧区域 -->
      <div class="right-area">
        <div class="box-one">
          <div class="card-title">
            <span class="card-title-text">老年人</span>
          </div>
          <div class="box-one-content">
            <div class="top" id="right-chart-one-top"></div>
            <div class="bottom">
              <div class="bottom-left" id="right-chart-one-bottom-left"></div>
              <div class="bottom-right" id="right-chart-one-bottom-right"></div>
            </div>
          </div>
        </div>

        <div class="box-two">
          <div class="card-title">
            <span class="card-title-text">孕产妇及儿童</span>
          </div>
          <div class="box-two-content">
            <div class="box-two-item" id="box-two-item-one"></div>
            <div class="box-two-item" id="box-two-item-two"></div>
            <div class="box-two-item" id="box-two-item-three"></div>
            <div class="box-two-item" id="box-two-item-four"></div>
            <div class="box-two-item" id="box-two-item-five"></div>
            <div class="box-two-item" id="box-two-item-six"></div>
          </div>
        </div>

        <div class="box-three">
          <div class="card-title">
            <span class="card-title-text">肺结核及严重精神障碍</span>
          </div>
          <div class="box-three-content">
            <div class="item">
              <div class="box-three-item" id="right-chart-three-left"></div>
              <div class="btn">
                <div>肺结核</div>
              </div>
            </div>
            <div class="item">
              <div class="box-three-item" id="right-chart-three-right"></div>
              <div class="btn">
                <div>严重精神病障碍</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

<script src="./js/chart.js"></script>
<script type="text/javascript">
  var type = ""; // 1:中间展示市级地图 2:中间展示县区地图
  /**
   * 初始化
   */
  $(function () {
    type = 2
    if (type == 1) {
      document.querySelector(".all-title-bg").style.backgroundImage = "url(../images/head-bg-mgs.png)"
      document.querySelector(".map").style.backgroundImage = "url(../images/ring-mgs.png)"
      document.querySelector(".map").style.backgroundSize = "110% 42%"
      document.querySelector(".map").style.backgroundPosition = "center 108%"
      document.querySelector(".map-box").style.top = 0
      document.querySelector(".map-box").style.left = '11vw'
      document.querySelector(".map-box").style.right = '11vw'
      document.querySelector(".map-box").style.bottom = '3vh'
      document.querySelector(".map-data").style.top = '0'
      document.querySelector(".map-data").style.height = '0'
      document.getElementById("page-title").innerText = "明光市基本公共卫生大数据主题"
      document.querySelector(".map-data").innerHTML = "<div class=\"first-column common-column\">\n" +
        "                  <div class=\"item\">\n" +
        "                    <p>\n" +
        "                      <img src=\"../images/item.png\" alt=\"\" />\n" +
        "                      <span>总</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                  <div class=\"item\">\n" +
        "                    <p>\n" +
        "                      <img src=\"../images/item.png\" alt=\"\" />\n" +
        "                      <span>老</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                  <div class=\"item\">\n" +
        "                    <p>\n" +
        "                      <img src=\"../images/item.png\" alt=\"\" />\n" +
        "                      <span>高</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                  <div class=\"item\">\n" +
        "                    <p>\n" +
        "                      <img src=\"../images/item.png\" alt=\"\" />\n" +
        "                      <span>糖</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                </div>\n" +
        "                <div class=\"two-column common-column\">\n" +
        "                  <div class=\"item\">\n" +
        "                    <p>\n" +
        "                      <img src=\"../images/item.png\" alt=\"\" />\n" +
        "                      <span>儿</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                  <div class=\"item\">\n" +
        "                    <p>\n" +
        "                      <img src=\"../images/item.png\" alt=\"\" />\n" +
        "                      <span>孕</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                  <div class=\"item\">\n" +
        "                    <p>\n" +
        "                      <img src=\"../images/item.png\" alt=\"\" />\n" +
        "                      <span>肺</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                  <div class=\"item\">\n" +
        "                    <p>\n" +
        "                      <img src=\"../images/item.png\" alt=\"\" />\n" +
        "                      <span>精</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                </div>"
    } else if (type == 2) {
      document.querySelector(".all-title-bg").style.backgroundImage = "url(../images/head-bg.png)"
      document.querySelector(".map").style.backgroundImage = "url(../images/ring.png)"
      document.querySelector(".map").style.backgroundSize = "110% 82%"
      document.querySelector(".map").style.backgroundPosition = "center 185%"
      document.querySelector(".map-box").style.top = 0
      document.querySelector(".map-box").style.left = 0
      document.querySelector(".map-box").style.right = 0
      document.querySelector(".map-box").style.bottom = '16vh'
      document.querySelector(".map-data").style.top = '70%'
      document.querySelector(".map-data").style.height = '11.57vh'
      document.getElementById("page-title").innerText = "明水县基本公共卫生大数据主题"
      document.querySelector(".map-data").innerHTML =
        '<div class="first-line common-line">\n' +
        '                  <div class="item">\n' +
        "                    <p>\n" +
        '                      <img src="../images/item.png" alt="" />\n' +
        "                      <span>总</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        '                  <div class="item">\n' +
        "                    <p>\n" +
        '                      <img src="../images/item.png" alt="" />\n' +
        "                      <span>精</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                </div>\n" +
        '                <div class="two-line common-line">\n' +
        '                  <div class="item">\n' +
        "                    <p>\n" +
        '                      <img src="../images/item.png" alt="" />\n' +
        "                      <span>老</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        '                  <div class="item">\n' +
        "                    <p>\n" +
        '                      <img src="../images/item.png" alt="" />\n' +
        "                      <span>肺</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                </div>\n" +
        '                <div class="three-line common-line">\n' +
        '                  <div class="item">\n' +
        "                    <p>\n" +
        '                      <img src="../images/item.png" alt="" />\n' +
        "                      <span>高</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        '                  <div class="item">\n' +
        "                    <p>\n" +
        '                      <img src="../images/item.png" alt="" />\n' +
        "                      <span>孕</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                </div>\n" +
        '                <div class="four-line common-line">\n' +
        '                  <div class="item">\n' +
        "                    <p>\n" +
        '                      <img src="../images/item.png" alt="" />\n' +
        "                      <span>糖</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        '                  <div class="item">\n' +
        "                    <p>\n" +
        '                      <img src="../images/item.png" alt="" />\n' +
        "                      <span>儿</span>\n" +
        "                    </p>\n" +
        "                    <p>210000人</p>\n" +
        "                  </div>\n" +
        "                </div>";
    } else {
    }
    // 加载所有图表
    initChart();
  });

  /**
   * 界面缩放
   */
  $(window).resize(function () {
    setTimeout(() => {
      var leftChartOne = echarts.getInstanceByDom(
        document.getElementById("left-chart-one")
      );
      var leftChartTwoLeft = echarts.getInstanceByDom(
        document.getElementById("left-chart-two-left")
      );
      var leftChartTwoRight = echarts.getInstanceByDom(
        document.getElementById("left-chart-two-right")
      );
      var leftChartThreeLeft = echarts.getInstanceByDom(
        document.getElementById("left-chart-three-left")
      );
      var leftChartThreeRight = echarts.getInstanceByDom(
        document.getElementById("left-chart-three-right")
      );
      var middleChart = echarts.getInstanceByDom(
        document.getElementById("middle-chart")
      );
      var rightChartOneTop = echarts.getInstanceByDom(
        document.getElementById("right-chart-one-top")
      );
      var rightChartOneBottomLeft = echarts.getInstanceByDom(
        document.getElementById("right-chart-one-bottom-left")
      );
      var rightChartOneBottomRight = echarts.getInstanceByDom(
        document.getElementById("right-chart-one-bottom-right")
      );
      var boxTwoItemOne = echarts.getInstanceByDom(
        document.getElementById("box-two-item-one")
      );
      var boxTwoItemTwo = echarts.getInstanceByDom(
        document.getElementById("box-two-item-two")
      );
      var boxTwoItemThree = echarts.getInstanceByDom(
        document.getElementById("box-two-item-three")
      );
      var boxTwoItemFour = echarts.getInstanceByDom(
        document.getElementById("box-two-item-four")
      );
      var boxTwoItemFive = echarts.getInstanceByDom(
        document.getElementById("box-two-item-five")
      );
      var boxTwoItemSix = echarts.getInstanceByDom(
        document.getElementById("box-two-item-six")
      );
      var rightChartThreeLeft = echarts.getInstanceByDom(
        document.getElementById("right-chart-three-left")
      );
      var rightChartThreeRight = echarts.getInstanceByDom(
        document.getElementById("right-chart-three-right")
      );
      leftChartOne.resize();
      leftChartTwoLeft.resize();
      leftChartTwoRight.resize();
      leftChartThreeLeft.resize();
      leftChartThreeRight.resize();
      middleChart.resize();
      rightChartOneTop.resize();
      rightChartOneBottomLeft.resize();
      rightChartOneBottomRight.resize();
      boxTwoItemOne.resize();
      boxTwoItemTwo.resize();
      boxTwoItemThree.resize();
      boxTwoItemFour.resize();
      boxTwoItemFive.resize();
      boxTwoItemSix.resize();
      rightChartThreeLeft.resize();
      rightChartThreeRight.resize();
    }, 100);
  });
</script>

</html>